<template>
  <div>
    <!-- 已关注列表 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b class="colors">/<img :src="require('/src/assets/img/service.png')" />关注管理</b>
      <b><span class="fenge">/</span>关注列表</b>
    </div>
    <div class="task-box">
      <div class="nav">
        <div class="nav-item" @click="getAlreadyList(index)" v-for="(item, index) in navArr" :key="index" :class="[index == activeNav ? 'active' : '']">
          <span>{{ item }}</span>
          <div class="back"></div>
          <div class="back-active"></div>
        </div>
        <div class="animate-border" :style="{'left': 'calc('+ activeNav*150 +'px + 55px)'}"></div>
      </div>
    </div>
    <el-card class="cardTits cardTiti" shadow="hover">
      <div class="subject-title">
        <div class="query">
          <div class="query-input">
            <el-input
              placeholder="姓名/手机号/身份证"
              v-model="searchVal"
            ></el-input>
          </div>
          <el-button class="query-btn" @click="getAlreadyList(activeNav)" type="primary">查询</el-button>
        </div>
        <div class="download" v-show="checkedLsit.length > 0">
          <span @click="batchUpdateAttentions">解除关注</span>
          <span @click="excelDownload">下载</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        @selectionChange="downloadWhether"
        stripe
        style="width: 100%"
        ref="multipleTable"
        :row-key="getRowKeys"
        @sort-change="sortChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="60"> </el-table-column>
        <el-table-column prop="legalName" sortable="custom" label="姓名" width=""> </el-table-column>
        <el-table-column prop="legalIdcard" sortable="custom" label="身份证号" min-width="120">
        </el-table-column>
        <el-table-column prop="legalPhone" label="手机号" width="">
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="申请关注时间" min-width="120">
          <template #default="item">
            {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column v-if="activeNav != 3" sortable="custom" prop="examineTime" label="审核通过时间" min-width="120">
          <template #default="item">
            <template v-if="item.row.examineTime == null">-</template>
            <template v-else>{{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.examineTime)) }}</template>
          </template>
        </el-table-column>
        <el-table-column prop="openTime" min-width="120" sortable="custom" align="center" label="个体商户办理日期">
            <template #default="item">
              <template v-if="item.row.openTime == null">-</template>
              <template v-else>{{ format('yyyy-MM-dd', new Date(item.row.openTime)) }}</template>
            </template>
        </el-table-column>
        <el-table-column
           v-if="activeNav != 3"
          prop="isBusiness"
          align="center"
          label="是否已办理个体工商户"
          min-width="120"
        >
          <template #default="item">
            {{ item.row.isBusiness == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column v-if="activeNav == 3" sortable="custom" prop="examineTime" label="驳回时间" width="">
          <template #default="item">
            <template v-if="item.row.examineTime == null">-</template>
            <template v-else>{{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.examineTime)) }}</template>
          </template>
        </el-table-column>
        <el-table-column v-if="activeNav == 3" sortable="custom" prop="examineTime" label="驳回原因" width="">
          <template #default="item">
            <template v-if="item.row.rejectCode == null">-</template>
            <template v-else>{{ $store.state.reasonsRejection[item.row.rejectCode] }}</template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="activeNav == 3"
          prop="isBusiness"
          align="center"
          label="是否重新提交"
          width=""
        >
          <template #default="item">
            {{ item.row.isBusiness == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130" class-name="editor">
          <template #default="item">
            <router-link
              :to="{
                name: 'AlreadyDetails',
                query: { id: item.row.selfBusinessId },
              }"
            >
              <el-button type="text">详情</el-button>
            </router-link>
            <el-divider direction="vertical"></el-divider>
            <el-button @click="updateAttentions([item.row.id])" type="text">解除关注</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="arrPage"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "AlreadyFollow",
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      navArr: ['全部', '未办理个体工商户', '已办理个体工商户','被驳回'],
      activeNavItem: {
        0: 0,
        1: 1,
        2: 3,
        3: 4
      },
      activeNav: 0,
      searchVal: "", // 查询条件
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      tableData: [],
      checkedLsit: [],
      dwonloadList: [] // 选中的数据
    };
  },
  components: {},
  activated() {
    this.getAlreadyList(0)
  },
  methods: {
    downloadWhether(d) {
      // 表格复选 选择回调
      this.checkedLsit = []
      for(let i = 0; i<d.length; i++) {
        this.checkedLsit.push(d[i].id)
      }
      this.dwonloadList = d
    },
    excelDownload() {
      // 下载
      let checkSelect = new FormData();
      for (let i = 0; i < this.dwonloadList.length; i++) {
        checkSelect.append("selfId", this.dwonloadList[i].id);
      }
      checkSelect.append("businessId", this.dwonloadList[0].businessId)
      let info = JSON.parse(localStorage.getItem("bussines_info"))
      let bussines_token = localStorage.getItem("bussines_token")
      axios({
        method: "POST",
        url: "/api/quick/attention/loadAttentions?value=123",
        data: checkSelect,
        responseType: "blob",
        headers: {
          "websiteName": window.location.hostname,
          "Authorization": bussines_token,
          "businessId": info.businessId,
          "businessNo": info.businessNo,
          "platformId": info.platformId,
          "platformNo": info.platformNo,
          "content-type": "application/json;charset=UTF-8",
          "businessType": 3,
        }
      })
        .then((res) => {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          //后台再header中传文件名
          downloadElement.href = href;
          downloadElement.download = "企业信息"+ this.format("yyyyMMddhhmmss", new Date()) +".xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d
      this.getAlreadyList(this.activeNav)
    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d
      this.getAlreadyList(this.activeNav)
    },
    getAlreadyList(index) {
      this.activeNav = index;
      // 获取列表信息
      this.$http({
        url: "/api/quick/attention/selectAttentions",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          processStatus: this.activeNavItem[this.activeNav],
          mixedStr: this.searchVal,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.tableData = data.result.list
          this.total = data.result.total
          console.log(data)
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "legalName") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getAlreadyList(this.activeNav)
    },
    batchUpdateAttentions() {
      // 批量解除关注
      this.updateAttentions(this.checkedLsit)
    },
    updateAttentions(arr) {
      // 解除关注
      this.$http({
        url: "/api/quick/attention/updateAttentions",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: arr,
      }).then((data) => {
        if (data.code == 0) {
          this.$message({
            message: '已成功解除关注',
            type: 'success',
            offset: 60
          })
          this.getAlreadyList()
        }
      });
    }
  },
};
</script>
<style>
.cardTiti .el-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 0;
}
</style>
<style lang="scss" scoped>
.task-box {
  .nav {
    background-color: #e1e9f2;
    color: #6c8198;
    overflow: hidden;
    width: 600px;
    position: relative;
    .animate-border {
      width: 40px;
      height: 3px;
      background-color: #326CF0;
      border-radius: 2px;
      position: absolute;
      z-index: 4;
      bottom: 2px;
      transition: left .5s;
      left: 60px;
    }
    .nav-item {
      width: 150px;
      height: 40px;
      text-align: center;
      position: relative;
      line-height: 40px;
      float: left;
      cursor: pointer;
      font-size: 14px;
      span {
        z-index: 2;
        position: relative;
      }
      .back {
        transform: skew(20deg);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: #FFFFFF;
        border-radius: 2px;
      }
    }
    .nav-item.active:first-child {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .nav-item.active:nth-last-child(2) {
      .back-active {
        background-color: #FFFFFF;
        width: 70px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .nav-item.active {
      span {
        color: #326CF0;
      }
      .back {
        z-index: 1;
      }
    }
  }
}
</style>
